<template>
    <div class="post-list">
        <article v-for="post in list" :key="post._id" class="card mb-5 shadow-sm">
        <div class="card-body">
            <router-link :to="`/post/${post._id}`">
            <div class="row my-3 align-items-center">
                <div class="col-4">
                    <img :src="post.image?.url" class="rounded-lg w-100" alt="">
                </div>
                <div :class="{ 'col-8': post.image }">{{ post.excerpt }}</div>
            </div>
            <span>{{ post.createdAt }}</span>
             </router-link>
        </div>
   
        </article>
    </div>
</template>

<script  lang="ts">
import { PropType, defineComponent } from 'vue'
//  import { PostProps } from '@/testData'
 import { PostProps } from '@/store'

export default defineComponent({
    props:{
        list:{
            type:Array as PropType<PostProps[]>,
            required: true
        }
    },
    setup() {
        return {}
    }
})
</script>

<style scoped>

</style>